<template>
	<view class="screen">
		<view class="main" style="background: rgb(247.5, 227.1, 196.5);">
			<p style="font-size: 80rpx;">登录</p>
			<form @submit="formSubmit" @reset="formReset">
				<label style="margin-left: 50rpx;" for='email'>账号</label>
				<view class="ele">
					<input class="input" id="email" v-model="formData.user_id" placeholder="请输入账号"/>
				</view>
				<label style="margin-left: 50rpx;" for='password'>密码</label>
				<view class="ele">
					<input id="password" class="input" password="true" v-model="formData.password"/>
				</view>
				<view class="ele" style="margin: 30rpx;">
					<button form-type="submit" size="default" style="border-radius: 10%;width: 38%;">Submit</button>
					<button type="default" form-type="reset" size="default" style="border-radius: 10%;width: 38%;">Reset</button>
				</view>
			</form>
		</view>
	</view>
	
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { regiester } from '../../../public/p_interface';
import { useCounterStore } from '../../../store/user';


	let formData = reactive<regiester>({user_id: null,user_name:'',email:'',password:''})
	const user=useCounterStore();
	
	const formSubmit =()=>{
		
		uni.request({
		    url: 'http://121.40.242.216:8081/api/user/register',
			method:'POST',
		    data: {
		        user_id:formData.user_id,
		        password:formData.password
		    },
		    header: {
				'Content-Type': 'application/json'
		    },
		    success: (res) => {
				console.log(res.data)
				uni.setStorageSync("satoken", res.data!.data.tokenValue);
				uni.setStorageSync("loginId",res.data!.data.loginId)
				user.setId(res.data!.data.loginId);
				console.log(uni.getStorageSync("satoken"));
				console.log(user.getId())
				uni.switchTab({
					url:'/pages/person/person'
				});
		    }
		});
		//
		uni.request({
		    url: 'http://121.40.242.216:8081/api/user/one',
			method:'GET',
		    data: {
				user_id:uni.getStorageSync("loginId")
		    },
		    header: {
				'satoken':uni.getStorageSync("satoken"),
				'loginId':uni.getStorageSync("loginId")
		    },
		    success: (res) => {
		        console.log(res.data);
				user.setPic(res.data.data!.picture);
		    }
		});
		
		console.log("提交")
	}
	const formReset =()=>{
		
	}
</script>

<style>
.screen{
	display: flex;
	flex-direction: column;
	background: url('http://121.40.242.216:9000/bucket-chat/3544af028e31629138f27dad07959f0.jpg');  
    background-size: cover; /* 确保背景覆盖 */  
    background-position: center; /* 背景居中 */  
    background-repeat: no-repeat; /* 不重复背景 */  
	width: 100%;
	height: 1380rpx;
}
.main{
	opacity: 0.9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 50rpx;
	width: 100%;
	margin-top:38%;
	height: 600rpx;
}
.ele{
	display: flex;
	justify-content: center;
}
.input{
	width: 680rpx;
	height: 100rpx;
	background: aliceblue;
	border-radius: 30rpx;
}      
</style>
